<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title>竞赛申请卡</title>
		<link rel="stylesheet" type="text/css" href="../../css/jquery-weui.min.css">
		<link rel="stylesheet" type="text/css" href="../../css/aui.css">
		<link rel="stylesheet" type="text/css" href="../../css/api.css"/>
		<style>
			body {
				background-color: #FFFFFF;
			}
			.aui-content {
				background-color: #FFFFFF;
			}
			.img_title_bg_styel {
				width: 100%;
			}
			.base_left_item {
				position: fixed;
				top: 22px;
				left: 8px;
				z-index: 10;
			}
			.base_back_icon {
				height: 30px;
			}
			.aui-list.aui-form-list .aui-list-item-inner {
				-webkit-box-sizing: border-box;
				box-sizing: border-box;
				display: -webkit-box;
				display: -webkit-flex;
				display: flex;
				padding: 0;
				border-radius: 60px;
				border: 1px solid #333333;
				margin-right: 10px;
				margin-top: 10px;
			}
			.list-img {
				width: 26px;
				margin-left: 10px;
			}
			.aui-btn-blue {
				color: #ffffff !important;
				background-color: #18b4ed !important;
			}
			.botton-style {
				display: flex;
				align-items: center;
				margin-top: 10px;
				margin-right: 10px;
			}
			.div-right- {
				background-color: #18b4ed;
				height: 42px;
				width: 40px;
				overflow: hidden;
				border-top-right-radius: 60px;
				border-bottom-right-radius: 60px;
				line-height: 44px;
				text-align: center;
			}
			.div-right- > img {
				width: 16px;
			}
			.aui-list textarea {
				overflow: auto;
				padding: 5px 5px;
				border-radius: 5px;
				border: 1px solid #333333;
				height: 100px;
				/* line-height: 1rem; */
				resize: none;
			}
			.main10 {
				margin-left: 10px;
				margin-right: 10px;
				margin-top: 20px;
			}
			.botton-style- {
				width: 100%;
				border-radius: 60px;
				margin-bottom: 20px;
			}
			.toolbar .picker-button {
				color: #18b4ed;
			}
			.div-xuiqi-style {
				overflow: auto;
				padding: 5px 5px;
				border-radius: 5px;
				border: 1px solid #333333;
				height: 100px;
				/* line-height: 1rem; */
				resize: none;
			}
			.span-style-content {
				padding: 5px 10px;
				border-radius: 60px;
				background-color: #EBEBEB;
				font-size: 14px;
				color: #333333;
				margin-top: 8px;
				margin-right: 8px;
			}
			div input {
				font-size: 14px;
			}
			.div-img-style {
				background: url(../../image/del_pic.png) right top no-repeat;
				background-size: 20px;
				float: left;
				padding-right: 20px;
				padding-top: 5px;
				margin-right: 8px;
				margin-left: 8px;
			}
			.aui-list .aui-list-item {
				/*  border: none;
				 background-size: 100% 1px;
				 background-repeat: no-repeat;
				 background-position: bottom;*/
				background-repeat: none;
				background-image: none;
				background-image: none;
				/*		background-color: #F4F5F7;*/
				-webkit-tap-highlight-color: none;
			}
			.aui-list-item .aui-list-item-inner {
				-webkit-tap-highlight-color: none;
			}
			.aui-list {
				background-image: none;
				/*background-color: #F4F5F7;*/
			}
		</style>
	</head>
	<body>
		<div>
			<img src="../../image/icon_competition_apply_crad.png"  class="img_title_bg_styel"/>
			<a class="base_left_item" href="#" onclick="backClick()"> <img class="base_back_icon" src="../../image/icon_bgback.png" alt=""> </a>
		</div>
		<div class="aui-content aui-margin-b-15">
			<ul class="aui-list aui-form-list">
				<div style="text-align: center">
					<b > 申请卡</b>
				</div>
				<li class="aui-list-item " >
					<div class="aui-list-item-inner">
						<div class="aui-list-item-label-icon">
							<img src="../../image/icon_shool.png"  class="list-img"/ >
						</div>
						<div class="aui-list-item-input">
							<input type="text" placeholder="申请院校/企业名称" id="shoolId"style="width: 100%">
						</div>
					</div>
				</li>
				<li class="aui-list-item ">
					<div class="aui-list-item-inner">
						<div class="aui-list-item-label-icon">
							<img src="../../image/icon_lxr.png"  class="list-img"/ >
						</div>
						<div class="aui-list-item-input">
							<input type="text" placeholder="联系人" id="nameid" style="width: 100%">
						</div>
					</div>
				</li>
				<li class="aui-list-item ">
					<div class="aui-list-item-inner">
						<div class="aui-list-item-label-icon">
							<img src="../../image/icon_tel.png"  class="list-img"/ >
						</div>
						<div class="aui-list-item-input">
							<input type="text" id="phone_id" placeholder="手机号" style="width: 100%"  maxlength="11" onkeyup="this.value=this.value.replace(/\D/g,'')">
						</div>
					</div>
				</li>
				<li class="aui-list-item ">
					<div class="aui-list-item-inner">
						<div class="aui-list-item-label-icon">
							<img src="../../image/icon_yzm.png"  class="list-img"/ >
						</div>
						<div class="aui-list-item-input">
							<input type="text" placeholder="验证码" style="width: 100%" id="editcode" maxlength="6" onkeyup="this.value=this.value.replace(/\D/g,'')" >
						</div>
					</div>
					<div class="botton-style"  >
						<button class="aui-btn   aui-btn-blue" id="sendcodeid" onclick="sendcode()" >
							获取短信验证码
						</button>
					</div>
				</li>
				<li class="aui-list-item ">
					<div class="aui-list-item-inner">
						<div class="aui-list-item-label-icon">
							<img src="../../image/icon_lxr.png"  class="list-img"/ >
						</div>
						<div class="aui-list-item-input">
							<input type="text" placeholder="报名对象" id="crad_user" style="width: 90%">
						</div>
						<div class="div-right-" >
							<img src="../../image/icon_competion_down.png"  / >
						</div>
					</div>
				</li>
				<li class="aui-list-item ">
					<div class="aui-list-item-inner">
						<div class="aui-list-item-label-icon">
							<img src="../../image/icon_usernum.png"  class="list-img"/ >
						</div>
						<div class="aui-list-item-input">
							<input type="text" placeholder="预计参与人数" id="crad_num" style="width: 90%">
						</div>
						<div class="div-right-" >
							<img src="../../image/icon_competion_down.png"  / >
						</div>
					</div>
				</li>
				<li class="aui-list-item ">
					<div class="aui-list-item-inner">
						<div class="aui-list-item-label-icon">
							<img src="../../image/icon_xsh.png"  class="list-img"/ >
						</div>
						<div class="aui-list-item-input">
							<input type="text" placeholder="参赛形式" id="crad_type" style="width: 90%">
						</div>
						<div class="div-right-" >
							<img src="../../image/icon_competion_down.png"  / >
						</div>
					</div>
				</li>
				<li class="aui-list-item ">
					<div class="aui-list-item-inner">
						<div class="aui-list-item-label-icon">
							<img src="../../image/icon_xsh.png"  class="list-img"/ >
						</div>
						<div class="aui-list-item-input">
							<input type="text" placeholder="参数内容来源" id="crad_content" style="width: 90%">
						</div>
						<div class="div-right-" >
							<img src="../../image/icon_competion_down.png"  / >
						</div>
					</div>
				</li>
				<div class="main10">
					<b > 预计竞赛包含的功能模块</b>
					<div  class="div-xuiqi-style" id="addmodelid">
						<!--<div class="div-img-style">
						在线学习
						</div><div class="div-img-style">
						在线学习
						</div><div class="div-img-style">
						在线学习
						</div><div class="div-img-style">
						在线学习
						</div><div class="div-img-style">
						在线学习
						</div>-->
					</div>
					<div id="modelid">
						<!--<span class="span-style-content">在线学习</span>
						<span class="span-style-content">在线考核</span>
						<span class="span-style-content">投票计分</span>
						<span class="span-style-content">问卷调查</span>
						<span class="span-style-content">三方评分</span>
						<span class="span-style-content">互动点赞</span>
						<span class="span-style-content">上传作品</span>-->
					</div>
				</div>
				<div class="main10">
					<b > 可备注补充其他需求和功能</b>
					<textarea  class="div-xuiqi-style" id="demandid" ></textarea>
				</div>
			</ul>
			<div class="main10">
				<div class="aui-btn   aui-btn-blue botton-style-" onclick="loaddata()" >
					提交
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="../../script/common.js"></script>
	<script type="text/javascript" src="../../script/jquery.min.js"></script>
	<script type="text/javascript" src="../../script/jquery-weui.min.js"></script>
	<script type="text/javascript" src="../../script/api.js"></script>
	<script type="text/javascript" src="../../script/MD5.js"></script>
	<script type="text/javascript" src="../../script/requestTool.js"></script>
	<script type="text/javascript">
		var model1 = new Array();
		//需要的模块
		var modelarr = ['在线学习', '在线考核', '投票计分', '问卷调查', '三方评分', '上传作品'];
		var currentCode = '';
		//当前验证码
		var time = 0;
		//倒计时
		var timer;
		//需要的模块结婚
		apiready = function() {
			SendBehaviorTrajectoriesNotifi1(0, '竞赛申请卡页', '170', api.pageParam.sourceurl, api.pageParam.sourcetitle, window.location.pathname, document.title);
			setupPicker();
			setmodel();
			setaddmodel();
		};
		$(document).ready(function() {
			setupPicker();
		});
		function setupPicker() {
			$("#crad_user").picker({
				title : "报名对象",
				cols : [{
					textAlign : 'center',
					values : ['校内人员', '学外人员']
				}],
				onChange : function(p, v, dv) {
					console.log('p:' + p, 'v:' + v, 'dv' + dv);
				},
				onClose : function(p, v, d) {
					console.log("close");
				}
			});
			$("#crad_num").picker({
				title : "预计参与人数",
				cols : [{
					textAlign : 'center',
					values : ['1000人', '1000人到5000人', '5000人到10000人', '10000人到50000人', '50000人以上']
				}],
				onChange : function(p, v, dv) {
					console.log('p:' + p, 'v:' + v, 'dv' + dv);
				},
				onClose : function(p, v, d) {
					console.log("close");
				}
			});
			$("#crad_type").picker({
				title : "参赛形式",
				cols : [{
					textAlign : 'center',
					values : ['纯线上比赛', '纯线下比赛', '线上线下相结合']
				}],
				onChange : function(p, v, dv) {
					console.log('p:' + p, 'v:' + v, 'dv' + dv);
				},
				onClose : function(p, v, d) {
					console.log("close");
				}
			});
			$("#crad_content").picker({
				title : "参数内容来源",
				cols : [{
					textAlign : 'center',
					values : ['校方提供', '组织方提供', '第三方提供']
				}],
				onChange : function(p, v, dv) {
					console.log('p:' + p, 'v:' + v, 'dv' + dv);
				},
				onClose : function(p, v, d) {
					console.log("close");
				}
			});
		}

		//添加内容的div
		function setmodel() {
			var modelhtmls = '';
			for (var i = 0; i < modelarr.length; i++) {
				var modelhtml = '<span class="span-style-content"  onclick="addmodel(' + i + ')">' + modelarr[i] + '</span>';
				modelhtmls = modelhtmls + modelhtml;
			}
			$("#modelid").html(modelhtmls);
		}

		//添加内容
		function addmodel(i) {
			model1.push(modelarr[i]);
			modelarr.splice(i, 1);
			setmodel();
			setaddmodel();
		}

		//移除内容的div
		function setaddmodel() {
			var modelhtmls = '';
			for (var i = 0; i < model1.length; i++) {
				var modelhtml = '<div class="div-img-style" onclick="removeraddmodel(' + i + ')">' + model1[i] + '</div>';
				modelhtmls = modelhtmls + modelhtml;
			}
			$("#addmodelid").html(modelhtmls);
		}

		//添加内容的div
		function removeraddmodel(i) {
			if (model1.length > 0) {
				modelarr.push(model1[i]);
				model1.splice(i, 1);
				setmodel();
				setaddmodel();
			}
		}

		//返回
		function backClick() {
			SendBehaviorTrajectoriesNotifi1(1, '竞赛申请卡页', '170', api.pageParam.sourceurl, api.pageParam.sourcetitle, window.location.pathname, document.title);
			api.closeWin({
			})
		}

		//发送验证吗
		function sendcode() {
			phon_id = $("#phone_id").val();
			if (phon_id.length == 11) {
				time = 59;
				timeCountDown();
				timer = setInterval(timeCountDown, 1000);
				sendCode();
			} else {
				api.toast({
					msg : '请输入正确的手机号码'
				});
			}
		}

		function timeCountDown() {
			if (time == 0) {
				clearInterval(timer);
				$("#sendcodeid").attr("disabled", false);
				$("#sendcodeid").css("background-color", "#18B4ED");
				$('#sendcodeid').html("再次发送验证码");
				return true;
			}
			$("#sendcodeid").css("background-color", "#929292");
			//
			$("#sendcodeid").attr("disabled", true);
			//
			$('#sendcodeid').html(time + "S后再次发送");
			time--;
			//倒计时
			return false;
		}

		//获取验证吗
		function sendCode() {
			currentCode = getCode();
			var timecode = Date.parse(new Date);
			var token = MD5("cfnetsms" + timecode);
			var url = 'http://boscache.cfnet.org.cn/sms/smsauth.php' + '?timecode=' + timecode + '&token=' + token + '&tel=' + phon_id + '&authcode=' + currentCode;
			api.ajax({
				tag : 'code',
				url : url
			}, function(ret, err) {
				//				 alert('ret:'+JSON.stringify(ret)+'err:'+JSON.stringify(err));
				api.cancelAjax({
					tag : 'code'
				});
			});
		}

		function getCode() {//获取验证码
			return getRandom(8999) + 1000;
		}

		/**
		 *applyfrom:天津大学（申请院校/企业）
		 connect:陈艳丽（联系人）
		 phone:15201454991（手机）
		 enrolment:1（报名对象）
		 participate:4（参与人数）
		 race_mode:8（竞赛形式）
		 content_source:12（内容来源）
		 fountion_module:18,19,20（包含功能模块）
		 remarks:无（备注其他需求）
		 uid:29365（申请人用户id）
		 *
		 *
		 *
		 *   */
		function loaddata() {
			var editcode = $('#editcode').val();
			var editTel = $('#phone_id').val();
			if ($api.trimAll(editcode) == '' || editTel == '') {
				api.toast({
					msg : '手机号或验证码不能为空！'
				});
				return;
			}
			if (editcode != currentCode) {
				api.toast({
					msg : '验证码错误！'
				});
				return;
			}
			var shool = $('#shoolId').val();
			if ($api.trimAll(shool) == '') {
				api.toast({
					msg : '院校/企业名称！'
				});
				return;
			}
			var name = $('#nameid').val();
			if ($api.trimAll(name) == '') {
				api.toast({
					msg : '联系人不能为空！'
				});
				return;
			}
			var crad_user = $('#crad_user').val();
			if ($api.trimAll(crad_user) == '') {
				api.toast({
					msg : '报名对象不能为空！'
				});
				return;
			}
			var crad_num = $('#crad_num').val();
			if ($api.trimAll(crad_num) == '') {
				api.toast({
					msg : '预计参加人数不能为空！'
				});
				return;
			}
			var crad_type = $('#crad_type').val();
			if ($api.trimAll(crad_type) == '') {
				api.toast({
					msg : '参赛形式不能为空！'
				});
				return;
			}
			var crad_content = $('#crad_content').val();
			if ($api.trimAll(crad_content) == '') {
				api.toast({
					msg : '参数内容来源不能为空！'
				});
				return;
			}
			var crad_contentArr = arrToString(model1);
			if ($api.trimAll(crad_contentArr) == '') {
				api.toast({
					msg : '预计竞赛包含的功能模块不能为空！'
				});
				return;
			}
			var demandid = $('#demandid').val();
			var params = {
				uid : $api.getStorage('cfnetppuid'),
				applyfrom : shool,
				connect : name,
				phone : editTel,
				enrolment : crad_user,
				participate : crad_num,
				race_mode : crad_type,
				content_source : crad_content,
				fountion_module : crad_contentArr,
				remarks : demandid,
			};
			//	 alert(JSON.stringify(params));
			showProgress;
			cfnetppPOST(url_competitiondoapplymatch, params, true, function(data, status) {
				//									 alert(JSON.stringify(data));
				SendBusinessOperationsLogNotifi('竞赛申请卡页', '170', params, params, '', data, '竞赛申请卡页', '170')
				api.hideProgress();
				if (status == 'success') {
					if (data.code == 200) {
						ShowToast('上传成功');
						setTimeout(function() {
							api.closeWin({
							});
						}, 1000);
					} else {
						ShowToast('提交失败');
					}
				} else {
					ShowToast('网络异常');
				}
			})
		}

		//弹出框
	</script>
</html>